html,body,div{
	box-sizing: border-box;
}

body{
		perspective:1000px;
}
.box{
	width: 200px;
	height: 200px;
	position: relative;
	margin:100px auto 0;
	border: 1px solid #eee;
	transform: rotate3d(1,1,1,30deg);
	transform-style:preserve-3d;
	perspective-origin: center center;
	animation: box 5s linear infinite;
}

.box div{
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
}
.down{
	background-color: red;
	transform-origin: bottom center;
}
.up{
	background-color: green;
	transform:translateZ(200px);
}
.left{
	background-color: orange;
	transform-origin:left center;
	transform:rotateY(-90deg);
}
.right{
	background-color: blue;
	transform-origin:right center;
	transform:rotateY(90deg);
}
.front{
	background-color: pink;
	transform-origin:bottom center;
	transform:rotateX(-90deg);
}
.behind{
	background-color: purple;
	transform-origin:top center;
	transform:rotateX(90deg)
}
@keyframes box{
	from{
		transform: rotate3d(1, 1, 1, 0);
	}
	to{
		transform: rotate3d(1, 1, 1, 360deg)
	}
}